<template>
	<div class="tv">
		<div class="head">
			<router-link to="/collection" class="ro" tag="div"><</router-link>
			<div class="ov">
				<div class="first">视频</div>
				<div>纸条</div>
			</div>
		</div>
		
		<div class="content">
			<div class="ben">
				<div class="box">
					<router-link tag="div" to="/play" class="con" v-for="(item,index) in sjData" :key="index">
						<div class="bg"><img src="../../../images/timg.jpg" alt="" /></div>
						<div class="font">
							<p>{{ item.xl }}</p>
							<p><span class="jg">{{ item.jg }}</span><span class="time">{{ item.time }}</span></p>
						</div>
					</router-link>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:"tv",
		data(){
			return{
				sjData:[
					{
						xl:"幼儿园",
						jg:"1000人学习",
						time:"免费"
					},
					{
						xl:"小学",
						jg:"1000人学习",
						time:"免费"
					},
					{
						xl:"初中",
						jg:"1000人学习",
						time:"免费"
					},
					{
						xl:"高中",
						jg:"1000人学习",
						time:"免费"
					},
					{
						xl:"大学",
						jg:"1000人学习",
						time:"免费"
					}
				]
			}
		}
	}
</script>

<style lang="less">
	.tv {
		.head{
			background: #3AAE95;
			height: 50/50rem;
			line-height: 50/50rem;
			overflow: hidden;
			.ro{
				font-size: 20/50rem;
				color:#fff;
				float: left;
				margin-left: 10/50rem;
			}
			.ov{
				float: left;
				overflow: hidden;
				border: 1/50rem solid #fff;
				display: inline-block;
				margin-left: 100/50rem;
				border-radius: 5/50rem;
				div{
					float: left;
					font-size: 16/50rem;
					padding: 0 20/50rem;
					/*background: #fff;*/
					color: #fff;
				}
				.first{
					background: #fff;
					color:#3AAE95;
				}
			}
		}
		.content{
			background: #fff;
			.ben{
				.yue{
					background: #d2d2d2;
					height: 50/50rem;
					line-height: 50/50rem;
					color:#000;
					font-size: 16/50rem;
				}
				.box{
					border-bottom: 10/50rem solid #f2f2f2;
					.con{
						margin-left: 20/50rem;
						padding-top: 10/50rem;
						margin-top: 10/50rem;
						overflow: hidden;
						.bg{
							float: left;
							img{
								width: 100/50rem;
								height: 100/50rem;
							}
						}
						.font{
							float: left;
							margin-left: 10/50rem;
							font-size: 18/50rem;
							color: #000;
							line-height: 60/50rem;
							p{
								span{
									color:#757575;
									font-size: 16/50rem;
								}
								.time{
									margin-left: 10/50rem;
								}
								.jg{
									display: inline-block;
									width: 150/50rem;
								}
							}
						}
					}
				}
				
			}
		}
	}
</style>